<template>

  <div>

    <el-container>
      <el-header>

        <el-row justify="start">
          <el-col :span="4">
            <div>
              <el-input
                  placeholder="请输入内容"
                  v-model="search"
                  clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-button @click="refresh">刷新</el-button>
              <el-button @click="add">新增线程池</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>

        <el-row justify="start">
          <el-col :span="24">
            <div class="">
              <el-table
                  :data="this.tableData"
                  style="width: 100%">
                <el-table-column
                    fixed
                    prop="threadName"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="threadCode"
                    label="编码">
                </el-table-column>
                <el-table-column
                    prop="corePoolSize"
                    label="核心线程数">
                </el-table-column>
                <el-table-column
                    prop="maximumPoolSize"
                    label="最大线程数">
                </el-table-column>
                <el-table-column
                    prop="queueCapacity"
                    label="队列大小">
                </el-table-column>
                <el-table-column
                    prop="rejectPolicy"
                    label="拒绝策略">
                </el-table-column>

                <el-table-column
                    prop="activeCount"
                    label="活动线程数">
                </el-table-column>

                <el-table-column
                    prop="waiteQueueCount"
                    label="等待队列数">
                </el-table-column>
                <el-table-column
                    prop="completedTaskCount"
                    label="总共完成任务数">
                </el-table-column>

                <el-table-column
                    prop="taskCount"
                    label="总共任务数">
                </el-table-column>

                <el-table-column
                    prop="disableFlag"
                    label="启停状态"
                >
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.disableFlag === '0' ? '启用' : '停用'"
                        disable-transitions
                    >{{ scope.row.disableFlag == '0' ? '启用' : '停用' }}
                    </el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="280">
                  <template #default="scope">
                    <el-button @click="handleClick(scope.row)" type="default" size="small">查看</el-button>
                    <el-button @click="edit(scope.row)" type="default" size="small">编辑</el-button>
                    <el-button @click="setStatusFlag(scope.row)" type="default" size="small">
                      {{ scope.row.disableFlag == '0' ? '停用' : '启用' }}
                    </el-button>
                    <el-button type="default" size="small" @click="handleThreadInfo(scope.row)">线程堆栈</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-col>
        </el-row>


      </el-main>

      <el-dialog v-model="threadDiag.visible" width="300px">
        <el-form :model="threadDiag">
          <el-form-item label="线程名称">
            <el-input v-model="threadDiag.threadName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="线程编码">
            <el-input v-model="threadDiag.threadCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="核心线程数">
            <el-input-number v-model="threadDiag.corePoolSize" autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="最大线程数">
            <el-input-number v-model="threadDiag.maximumPoolSize" autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="连接保持时间">
            <el-input-number v-model="threadDiag.keepAliveTime" autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="超时时间单位">
            <el-select v-model="threadDiag.timeUnit" class="m-2" placeholder="Select" size="large">
              <el-option
                  v-for="item in this.timeUnitList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="队列大小">
            <el-input-number v-model="threadDiag.queueCapacity" autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="拒绝策略">
            <el-select v-model="threadDiag.rejectPolicy" class="m-2" placeholder="Select" size="large">
              <el-option
                  v-for="item in this.rejectPolicyList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="threadDiag.visible = false">取 消</el-button>
          <el-button type="primary" @click="this.saveThread">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="this.threadStackTrace" width="100%">
        <el-tabs v-model="threadTabActive" class="demo-tabs">
          <el-tab-pane
              :label="index"
              :name="index"
              v-for="(item,index) in this.threadInfo" :key="index">
            <span v-html="item"></span>
          </el-tab-pane>


        </el-tabs>

        <el-button @click="threadStackTrace = false">确 定</el-button>
      </el-dialog>

    </el-container>

  </div>

</template>

<script>
import {post} from '../../config/Request.js'
import apis from "@/request/apis.js";

export default {
  name: "ProcessThreadConfigManager",
  components: {},
  watch: {},
  data() {
    return {
      tableData: [],
      timeUnitList: [],
      rejectPolicyList: [],
      threadTabActive: null,
      threadInfo: null,
      threadStackTrace: false,
      initStr: '',
      threadDiag: {
        viewFlag: false,
        visible: false,
        threadName: '',
        threadCode: '',
        id: null,
        corePoolSize: 8,
        maximumPoolSize: 20,
        keepAliveTime: 5,
        queueCapacity: 5000,
        timeUnit: 'SECONDS',
        rejectPolicy: 'ABORT'
      }
    }
  },
  created() {
    this.initStr = JSON.stringify(this.threadDiag);
  },
  mounted() {
    this.refresh();
    this.queryTimeUnitList();
    this.queryRejectPolicyList();
  },
  methods: {
    refresh() {
      this.queryList();
    },
    add() {
      this.threadDiag.visible = true;

    },
    async setStatusFlag(row) {
      await apis.post("/square-lake/process/thread/config/set_status_flag", {
        id: row.id, disableFlag:
            row.disableFlag == '1' ? '0' : '1'
      });
      this.refresh();
    },
    async handleClick(row) {
      await this.edit(row);
      this.threadDiag.viewFlag = true;

    },
    async handleThreadInfo(row) {
      //
      const d = await apis.post("/square-lake/process/thread/config/thread_stack_trace", {
        id: row.id
      });
      // console.log(d);
      this.threadInfo = d;

      var keys = Object.keys(d);
      if (keys) {
        this.threadTabActive = keys[0];
        keys.forEach(value => {
          var s = this.threadInfo[value];
          s = s.replace(/\r\n/g, "<br/>")
          s = s.replace(/\n/g, "<br/>");
          this.threadInfo[value] = s;
        })
      }
      this.threadStackTrace = true;

    },

    async edit(row) {
      const data = await apis.post("/square-lake/process/thread/config/get_by_id", {id: row.id});
      this.threadDiag = data;
      this.threadDiag.visible = true;
    },
    async saveThread() {
      if (this.threadDiag.viewFlag) {
        this.threadDiag.viewFlag = false;
        this.threadDiag.visible = false;
        return
      }
      if (!this.threadDiag.threadName) {
        this.$message.error('请输入名称');
        return;
      }
      if (!this.threadDiag.threadCode) {
        this.$message.error('请输入编码');
        return;
      }
      if (!this.threadDiag.corePoolSize) {
        this.$message.error('请输入核心线程数');
        return;
      }
      if (!this.threadDiag.maximumPoolSize) {
        this.$message.error('请输入最大线程数');
        return;
      }
      if (!this.threadDiag.queueCapacity) {
        this.$message.error('请输入队列大小');
        return;
      }
      if (!this.threadDiag.keepAliveTime) {
        this.$message.error('请输入存活时间');
        return;
      }
      if (!this.threadDiag.timeUnit) {
        this.$message.error('请选择超时时间单位');
        return;
      }
      if (!this.threadDiag.rejectPolicy) {
        this.$message.error('请选择拒绝策略');
        return;
      }
      await apis.post("/square-lake/process/thread/config/save", this.threadDiag);

      this.clearObj(this.threadDiag);

      this.refresh();
    },
    clearObj() {
      this.threadDiag = JSON.parse(this.initStr);
    },

    async queryTimeUnitList() {
      const data = await apis.post("/square-lake/process/thread/config/time_unit_list", {});
      this.timeUnitList = data;
    },
    async queryRejectPolicyList() {
      const data = await apis.post("/square-lake/process/thread/config/reject_policy_list", {});
      this.rejectPolicyList = data;
    },
    async queryList() {
      const data = await apis.post("/square-lake/process/thread/config/list", {})
      this.tableData = data;
    },
  }
}
</script>

<style scoped>

</style>